home *** CD-ROM | disk | FTP | other *** search
/ PC Pro 2005 October / DPPCPRO1005.ISO / Download / Web Developer / webdeveloper.xpi / chrome / webdeveloper.jar / content / webdeveloper / images.js < prev    next >
Encoding:
JavaScript  |  2005-03-21  |  36.3 KB  |  869 lines
  1. // Displays all image dimensions
  2. function webdeveloper_displayImageDimensions(element, applyStyle)
  3. {
  4.     const mainTabBox   = getBrowser().mTabBox;
  5.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  6.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  7.     const heightText   = stringBundle.getString("webdeveloper_height");
  8.     const widthText    = stringBundle.getString("webdeveloper_width");
  9.  
  10.     var dimensions       = null;
  11.     var height           = null;
  12.     var imageElement     = null;
  13.     var imageElementList = null;
  14.     var pageDocument     = null;
  15.     var spanElement      = null;
  16.     var spanElementList  = null;
  17.     var width            = null;
  18.  
  19.     // Loop through the documents
  20.     for(var i = 0; i < documentList.length; i++)
  21.     {
  22.         pageDocument     = documentList[i];
  23.         imageElementList = pageDocument.getElementsByTagName("img");
  24.         spanElementList  = pageDocument.getElementsByTagName("span");
  25.  
  26.         // Loop through all the span tags
  27.         for(var j = 0; j < spanElementList.length; j++)
  28.         {
  29.             spanElement = spanElementList[j];
  30.  
  31.             // If the class exists and is set to webdeveloper-dimensions-span
  32.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-dimensions-span")
  33.             {
  34.                 spanElement.parentNode.removeChild(spanElement);
  35.                 j--;
  36.             }
  37.         }
  38.  
  39.         // Loop through all the img tags
  40.         for(j = 0; j < imageElementList.length; j++)
  41.         {
  42.             dimensions   = null;
  43.             imageElement = imageElementList[j];
  44.             height       = imageElement.getAttribute("height");
  45.             width        = imageElement.getAttribute("width");
  46.  
  47.             // If the width and height are set
  48.             if(width && height)
  49.             {
  50.                 dimensions = width + "x" + height;
  51.             }
  52.             else if(width)
  53.             {
  54.                 dimensions = widthText + "=" + width;
  55.             }
  56.             else if(height)
  57.             {
  58.                 dimensions = heightText + "=" + height;
  59.             }
  60.  
  61.             // If the element is checked and the dimensions are set
  62.             if(element.getAttribute("checked") && dimensions)
  63.             {
  64.                 spanElement = pageDocument.createElement("span");
  65.  
  66.                 spanElement.setAttribute("class", "webdeveloper-dimensions-span");
  67.                 spanElement.appendChild(pageDocument.createTextNode(dimensions));
  68.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  69.             }
  70.  
  71.             height = null;
  72.             width  = null;
  73.         }
  74.     }
  75.  
  76.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_dimensions.css", "webdeveloper-display-image-dimensions", applyStyle);
  77.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-dimensions-tooltips", ".webdeveloper-dimensions-span");
  78. }
  79.  
  80. // Displays all image file sizes
  81. function webdeveloper_displayImageFileSizes(element, applyStyle)
  82. {
  83.     const fileProtocolHandler = Components.classes["@mozilla.org/network/protocol;1?name=file"].createInstance(Components.interfaces.nsIFileProtocolHandler);
  84.     const httpCacheSession    = Components.classes["@mozilla.org/network/cache-service;1"].getService(Components.interfaces.nsICacheService).createSession("HTTP", 0, true);
  85.     const mainTabBox          = getBrowser().mTabBox;
  86.     const documentList        = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  87.     const stringBundle        = document.getElementById("webdeveloper-string-bundle");
  88.     const fileSizeText        = stringBundle.getString("webdeveloper_fileSize");
  89.  
  90.     var file             = null;
  91.     var fileSize         = null;
  92.     var imageElement     = null;
  93.     var imageElementList = null;
  94.     var pageDocument     = null;
  95.     var spanElement      = null;
  96.     var spanElementList  = null;
  97.  
  98.     // Loop through the documents
  99.     for(var i = 0; i < documentList.length; i++)
  100.     {
  101.         pageDocument     = documentList[i];
  102.         imageElementList = pageDocument.getElementsByTagName("img");
  103.         spanElementList  = pageDocument.getElementsByTagName("span");
  104.  
  105.         // Loop through all the span tags
  106.         for(var j = 0; j < spanElementList.length; j++)
  107.         {
  108.             spanElement = spanElementList[j];
  109.  
  110.             // If the class exists and is set to webdeveloper-file-sizes-span
  111.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-file-sizes-span")
  112.             {
  113.                 spanElement.parentNode.removeChild(spanElement);
  114.                 j--;
  115.             }
  116.         }
  117.  
  118.         // Loop through all the img tags
  119.         for(j = 0; j < imageElementList.length; j++)
  120.         {
  121.             fileSize     = null;
  122.             imageElement = imageElementList[j];
  123.  
  124.             // If the element is checked
  125.             if(element.getAttribute("checked"))
  126.             {
  127.                 // Try to get the file size
  128.                 try
  129.                 {
  130.                     file = httpCacheSession.openCacheEntry(imageElement.src, Components.interfaces.nsICache.ACCESS_READ, false);
  131.  
  132.                     // If there is a file
  133.                     if(file)
  134.                     {
  135.                         fileSize = file.dataSize;
  136.                     }
  137.                 }
  138.                 catch(exception)
  139.                 {
  140.                     try
  141.                     {
  142.                         file = fileProtocolHandler.getFileFromURLSpec(imageElement.src);
  143.  
  144.                         // If the file is set and it exists and is a file
  145.                         if(file && file.exists() && file.isFile())
  146.                         {
  147.                             fileSize = file.fileSize;
  148.                         }
  149.                     }
  150.                     catch(exceptionNested)
  151.                     {
  152.                         // Do nothing
  153.                     }
  154.                 }
  155.  
  156.                 // If there is a file size
  157.                 if(fileSize)
  158.                 {
  159.                     spanElement = pageDocument.createElement("span");
  160.  
  161.                     spanElement.setAttribute("class", "webdeveloper-file-sizes-span");
  162.                     spanElement.appendChild(pageDocument.createTextNode(fileSizeText + "=" + webdeveloper_formatFileSize(fileSize)));
  163.                     imageElement.parentNode.insertBefore(spanElement, imageElement);
  164.                 }
  165.             }
  166.         }
  167.     }
  168.  
  169.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_file_sizes.css", "webdeveloper-display-image-file-sizes", applyStyle);
  170.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-file-sizes-tooltips", ".webdeveloper-file-sizes-span");
  171. }
  172.  
  173. // Displays all image paths
  174. function webdeveloper_displayImagePaths(element, applyStyle)
  175. {
  176.     const mainTabBox   = getBrowser().mTabBox;
  177.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  178.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  179.     const srcText      = stringBundle.getString("webdeveloper_src");
  180.  
  181.     var imageElement     = null;
  182.     var imageElementList = null;
  183.     var pageDocument     = null;
  184.     var spanElement      = null;
  185.     var spanElementList  = null;
  186.     var src              = null;
  187.  
  188.     // Loop through the documents
  189.     for(var i = 0; i < documentList.length; i++)
  190.     {
  191.         pageDocument     = documentList[i];
  192.         imageElementList = pageDocument.getElementsByTagName("img");
  193.         spanElementList  = pageDocument.getElementsByTagName("span");
  194.  
  195.         // Loop through all the span tags
  196.         for(var j = 0; j < spanElementList.length; j++)
  197.         {
  198.             spanElement = spanElementList[j];
  199.  
  200.             // If the class exists and is set to webdeveloper-path-span
  201.             if(spanElement.hasAttribute("class") && spanElement.getAttribute("class") == "webdeveloper-path-span")
  202.             {
  203.                 spanElement.parentNode.removeChild(spanElement);
  204.                 j--;
  205.             }
  206.         }
  207.  
  208.         // Loop through all the img tags
  209.         for(j = 0; j < imageElementList.length; j++)
  210.         {
  211.             imageElement = imageElementList[j];
  212.             spanElement  = pageDocument.createElement("span");
  213.             src          = imageElement.getAttribute("src");
  214.  
  215.             // If the element is checked and the src is set
  216.             if(element.getAttribute("checked") && src)
  217.             {
  218.                 spanElement.setAttribute("class", "webdeveloper-path-span");
  219.                 spanElement.appendChild(pageDocument.createTextNode(srcText + "=" + src));
  220.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  221.             }
  222.         }
  223.     }
  224.  
  225.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_image_paths.css", "webdeveloper-display-image-paths", applyStyle);
  226.     webdeveloper_toggleFeatureTooltipStyles(element, "webdeveloper-display-image-paths-tooltips", ".webdeveloper-path-span");
  227. }
  228.  
  229. // Finds all the broken images on the page
  230. function webdeveloper_findBrokenImages()
  231. {
  232.     const mainTabBox         = getBrowser().mTabBox;
  233.     const documentList       = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  234.     const oldTab             = getBrowser().selectedTab;
  235.     const oldURL             = getBrowser().currentURI.spec;
  236.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  237.     const request            = new XMLHttpRequest();
  238.     const stringBundle       = document.getElementById("webdeveloper-string-bundle");
  239.     const title              = stringBundle.getFormattedString("webdeveloper_findBrokenImagesTitle", [oldURL]);
  240.  
  241.     var backgroundImage = null;
  242.     var brokenURLs      = null;
  243.     var documentURL     = null;
  244.     var element         = null;
  245.     var generatedPage   = null;
  246.     var headerElement   = null;
  247.     var image           = null;
  248.     var imageList       = null;
  249.     var linkElement     = null;
  250.     var pageDocument    = null;
  251.     var pElement        = null;
  252.     var preElement      = null;
  253.  
  254.     generatedPage = webdeveloper_generatePage("");
  255.  
  256.     // This must be done to make generated content render
  257.     request.open("get", "about:blank", false);
  258.     request.send("");
  259.  
  260.     generatedPage.content.document.title = title;
  261.  
  262.     linkElement = generatedPage.content.document.createElement("link");
  263.     linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated_content.css");
  264.     linkElement.setAttribute("media", "all");
  265.     linkElement.setAttribute("rel", "stylesheet");
  266.     linkElement.setAttribute("type", "text/css");
  267.     generatedPage.content.document.getElementsByTagName("head")[0].appendChild(linkElement);
  268.  
  269.     headerElement = generatedPage.content.document.createElement("h1");
  270.     headerElement.appendChild(generatedPage.content.document.createTextNode(title));
  271.     generatedPage.content.document.body.appendChild(headerElement);
  272.  
  273.     // Loop through the documents
  274.     for(var i = 0; i < documentList.length; i++)
  275.     {
  276.         brokenURLs   = "";
  277.         pageDocument = documentList[i];
  278.         documentURL  = pageDocument.documentURI;
  279.         imageList    = pageDocument.getElementsByTagName("img");
  280.  
  281.         headerElement = generatedPage.content.document.createElement("h2");
  282.         linkElement   = generatedPage.content.document.createElement("a");
  283.         linkElement.setAttribute("href", documentURL);
  284.         linkElement.appendChild(generatedPage.content.document.createTextNode(documentURL));
  285.         headerElement.appendChild(linkElement);
  286.         generatedPage.content.document.body.appendChild(headerElement);
  287.  
  288.         // Loop through all the images
  289.         for(var j = 0; j < imageList.length; j++)
  290.         {
  291.             image = imageList[j];
  292.  
  293.             // If the image is broken
  294.             if(!image.naturalWidth)
  295.             {
  296.                 brokenURLs += "\n" + image.src;
  297.             }
  298.         }
  299.  
  300.         const treeWalker = pageDocument.createTreeWalker(pageDocument.body, NodeFilter.SHOW_ELEMENT, null, false);
  301.  
  302.         // While the tree walker has more nodes
  303.         while((element = treeWalker.nextNode()) != null)
  304.         {
  305.             backgroundImage = element.ownerDocument.defaultView.getComputedStyle(element, "").getPropertyCSSValue("background-image");
  306.  
  307.             // If this element has a background image and it is a URL
  308.             if(backgroundImage && backgroundImage.primitiveType == CSSPrimitiveValue.CSS_URI)
  309.             {
  310.                 image     = new Image();
  311.                 image.src = backgroundImage.getStringValue();
  312.  
  313.                 // If the image is broken
  314.                 if(!image.naturalWidth)
  315.                 {
  316.                     brokenURLs += "\n" + image.src;
  317.                 }
  318.             }
  319.         }
  320.  
  321.         // If there are no broken images
  322.         if(brokenURLs == "")
  323.         {
  324.             pElement = generatedPage.content.document.createElement("p");
  325.             pElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_noBrokenImages")));
  326.             generatedPage.content.document.body.appendChild(pElement);
  327.         }
  328.         else
  329.         {
  330.             preElement = generatedPage.content.document.createElement("pre");
  331.             preElement.appendChild(generatedPage.content.document.createTextNode(brokenURLs));
  332.             generatedPage.content.document.body.appendChild(preElement);
  333.         }
  334.     }
  335.  
  336.     // If the open tabs in background preference is set to true
  337.     if(preferencesService.prefHasUserValue("webdeveloper.open.tabs.background") && preferencesService.getBoolPref("webdeveloper.open.tabs.background"))
  338.     {
  339.         getBrowser().selectedTab = oldTab;
  340.     }
  341. }
  342.  
  343. // Hides/shows all background images
  344. function webdeveloper_hideBackgroundImages(element, applyStyle)
  345. {
  346.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_background_images.css", "webdeveloper-hide-background-images", applyStyle);
  347. }
  348.  
  349. // Hides/shows all the images
  350. function webdeveloper_hideImages(element, id, applyStyle)
  351. {
  352.     const hide         = element.getAttribute("checked");
  353.     const mainTabBox   = getBrowser().mTabBox;
  354.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  355.  
  356.     var inputElement     = null;
  357.     var inputElementList = null;
  358.     var pageDocument     = null;
  359.  
  360.     // Loop through the documents
  361.     for(var i = 0; i < documentList.length; i++)
  362.     {
  363.         pageDocument     = documentList[i];
  364.         inputElementList = pageDocument.getElementsByTagName("input");
  365.  
  366.         // Loop through all the input tags
  367.         for(var j = 0; j < inputElementList.length; j++)
  368.         {
  369.             inputElement = inputElementList[j];
  370.  
  371.             // If hiding images and the element is an image
  372.             if(hide && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
  373.             {
  374.                 inputElement.setAttribute("type", "submit");
  375.  
  376.                 // If the element has a class attribute
  377.                 if(inputElement.hasAttribute("class"))
  378.                 {
  379.                     inputElement.setAttribute("class", inputElement.getAttribute("class") + " webdeveloper-image");
  380.                 }
  381.                 else
  382.                 {
  383.                     inputElement.setAttribute("class", "webdeveloper-image");
  384.                 }
  385.             }
  386.             else if(inputElement.hasAttribute("class") && inputElement.getAttribute("class").indexOf("webdeveloper-image") != -1)
  387.             {
  388.                 inputElement.setAttribute("type", "image");
  389.                 inputElement.setAttribute("class", webdeveloper_removeSubstring(inputElement.getAttribute("class"), "webdeveloper-image").trim());
  390.             }
  391.             else
  392.             {
  393.                 // This stops the fields reordering
  394.                 inputElement.setAttribute("type", inputElement.getAttribute("type"));
  395.             }
  396.         }
  397.     }
  398.  
  399.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/hide_images.css", id, applyStyle);
  400. }
  401.  
  402. // Makes all the images invisible
  403. function webdeveloper_makeImagesInvisible(element, id, applyStyle)
  404. {
  405.     const mainTabBox   = getBrowser().mTabBox;
  406.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  407.     const invisible    = element.getAttribute("checked");
  408.  
  409.     var image            = null;
  410.     var imageList        = null;
  411.     var inputElement     = null;
  412.     var inputElementList = null;
  413.     var pageDocument     = null;
  414.  
  415.     // Loop through the documents
  416.     for(var i = 0; i < documentList.length; i++)
  417.     {
  418.         pageDocument     = documentList[i];
  419.         imageList        = pageDocument.getElementsByTagName("img");
  420.         inputElementList = pageDocument.getElementsByTagName("input");
  421.  
  422.         // Loop through all the input tags
  423.         for(var j = 0; j < inputElementList.length; j++)
  424.         {
  425.             inputElement = inputElementList[j];
  426.  
  427.             // If making images invisible and the element is an image
  428.             if(invisible && inputElement.hasAttribute("type") && inputElement.getAttribute("type").toLowerCase() == "image")
  429.             {
  430.                 inputElement.setAttribute("type", "submit");
  431.  
  432.                 // If the element has a class attribute
  433.                 if(inputElement.hasAttribute("class"))
  434.                 {
  435.                     inputElement.setAttribute("class", inputElement.getAttribute("class") + " webdeveloper-image");
  436.                 }
  437.                 else
  438.                 {
  439.                     inputElement.setAttribute("class", "webdeveloper-image");
  440.                 }
  441.             }
  442.             else if(inputElement.hasAttribute("class") && inputElement.getAttribute("class").indexOf("webdeveloper-image") != -1)
  443.             {
  444.                 inputElement.setAttribute("type", "image");
  445.                 inputElement.setAttribute("class", webdeveloper_removeSubstring(inputElement.getAttribute("class"), "webdeveloper-image").trim());
  446.             }
  447.             else
  448.             {
  449.                 // This stops the fields reordering
  450.                 inputElement.setAttribute("type", inputElement.getAttribute("type"));
  451.             }
  452.         }
  453.  
  454.         // Loop through all the images
  455.         for(j = 0; j < imageList.length; j++)
  456.         {
  457.             image = imageList[j];
  458.  
  459.             // If making images invisible
  460.             if(invisible)
  461.             {
  462.                 // If the image width is not set and the image is not broken
  463.                 if(!image.getAttribute("width") && image.naturalWidth)
  464.                 {
  465.                     image.setAttribute("width", image.naturalWidth);
  466.                 }
  467.  
  468.                 // If the image height is not set and the image is not broken
  469.                 if(!image.getAttribute("height") && image.naturalHeight)
  470.                 {
  471.                     image.setAttribute("height", image.naturalHeight);
  472.                 }
  473.  
  474.                 image.setAttribute("src", "chrome://webdeveloper/content/spacer.gif?" + image.getAttribute("src"));
  475.             }
  476.             else
  477.             {
  478.                 image.setAttribute("src", webdeveloper_removeSubstring(image.getAttribute("src"), "chrome://webdeveloper/content/spacer.gif?"));
  479.             }
  480.         }
  481.     }
  482.  
  483.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/make_images_invisible.css", id, applyStyle);
  484. }
  485.  
  486. // Outlines all the images with adjusted dimensions
  487. function webdeveloper_outlineImagesWithAdjustedDimensions(element, applyStyle)
  488. {
  489.     const mainTabBox   = getBrowser().mTabBox;
  490.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  491.  
  492.     var imageElement     = null;
  493.     var imageElementList = null;
  494.     var naturalHeight    = null;
  495.     var naturalWidth     = null;
  496.     var pageDocument     = null;
  497.  
  498.     // Loop through the documents
  499.     for(var i = 0; i < documentList.length; i++)
  500.     {
  501.         pageDocument     = documentList[i];
  502.         imageElementList = pageDocument.getElementsByTagName("img");
  503.  
  504.         // Loop through all the img tags
  505.         for(var j = 0; j < imageElementList.length; j++)
  506.         {
  507.             imageElement  = imageElementList[j];
  508.             naturalHeight = imageElement.naturalHeight;
  509.             naturalWidth  = imageElement.naturalWidth;
  510.  
  511.             // If outlining
  512.             if(element.getAttribute("checked"))
  513.             {
  514.                 // If the width or height has been adjusted
  515.                 if((naturalWidth && imageElement.hasAttribute("width") && imageElement.getAttribute("width") != naturalWidth)
  516.                     || (naturalHeight && imageElement.hasAttribute("height") && imageElement.getAttribute("height") != naturalHeight))
  517.                 {
  518.                     // If the image has a class attribute
  519.                     if(imageElement.hasAttribute("class"))
  520.                     {
  521.                         imageElement.setAttribute("class", imageElement.getAttribute("class") + " webdeveloper-adjusted-image");
  522.                     }
  523.                     else
  524.                     {
  525.                         imageElement.setAttribute("class", "webdeveloper-adjusted-image");
  526.                     }
  527.                 }
  528.             }
  529.             else if(imageElement.hasAttribute("class") && imageElement.getAttribute("class").indexOf("webdeveloper-adjusted-image") != -1)
  530.             {
  531.                 imageElement.setAttribute("class", webdeveloper_removeSubstring(imageElement.getAttribute("class"), "webdeveloper-adjusted-image").trim());
  532.             }
  533.         }
  534.     }
  535.  
  536.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_adjusted_dimensions.css", "webdeveloper-outline-images-with-adjusted-dimensions", applyStyle);
  537. }
  538.  
  539. // Outlines all the images with empty alt attributes
  540. function webdeveloper_outlineImagesWithEmptyAltAttributes(element, applyStyle)
  541. {
  542.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_with_empty_alt_attributes.css", "webdeveloper-outline-images-with-empty-alt-attributes", applyStyle);
  543. }
  544.  
  545. // Outlines all the images without alt attributes
  546. function webdeveloper_outlineImagesWithoutAltAttributes(element, applyStyle)
  547. {
  548.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_alt_attributes.css", "webdeveloper-outline-images-without-alt-attributes", applyStyle);
  549. }
  550.  
  551. // Outlines all the images without dimensions
  552. function webdeveloper_outlineImagesWithoutDimensions(element, applyStyle)
  553. {
  554.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_dimensions.css", "webdeveloper-outline-images-without-dimensions", applyStyle);
  555. }
  556.  
  557. // Outlines all the images without title attributes
  558. function webdeveloper_outlineImagesWithoutTitleAttributes(element, applyStyle)
  559. {
  560.     webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/outline_images_without_title_attributes.css", "webdeveloper-outline-images-without-title-attributes", applyStyle);
  561. }
  562.  
  563. // Replaces all images with their alt attributes
  564. function webdeveloper_replaceImagesWithAltAttributes(element, applyStyle)
  565. {
  566.     const mainTabBox   = getBrowser().mTabBox;
  567.     const documentList = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  568.  
  569.     var altAttribute     = null;
  570.     var imageElement     = null;
  571.     var imageElementList = null;
  572.     var pageDocument     = null;
  573.     var previousElement  = null;
  574.     var spanElement      = null;
  575.  
  576.     // Loop through the documents
  577.     for(var i = 0; i < documentList.length; i++)
  578.     {
  579.         pageDocument     = documentList[i];
  580.         imageElementList = pageDocument.getElementsByTagName("img");
  581.  
  582.         // Loop through all the img tags
  583.         for(var j = 0; j < imageElementList.length; j++)
  584.         {
  585.             imageElement    = imageElementList[j];
  586.             altAttribute    = imageElement.getAttribute("alt");
  587.             previousElement = imageElement.previousSibling;
  588.             spanElement     = pageDocument.createElement("span");
  589.  
  590.             // If the previous element is an element with class webdeveloper-alt-span
  591.             if(previousElement && previousElement.nodeType == 1 && previousElement.getAttribute("class") == "webdeveloper-alt-span")
  592.             {
  593.                 previousElement.parentNode.removeChild(previousElement);
  594.             }
  595.  
  596.             // If the element is checked and the alt attribute exists
  597.             if(element.getAttribute("checked") && altAttribute)
  598.             {
  599.                 spanElement.setAttribute("class", "webdeveloper-alt-span");
  600.                 spanElement.appendChild(pageDocument.createTextNode(altAttribute));
  601.                 imageElement.parentNode.insertBefore(spanElement, imageElement);
  602.             }
  603.         }
  604.     }
  605.  
  606.     webdeveloper_hideImages(element, "webdeveloper-replace-images-with-alt-attributes", applyStyle);
  607. }
  608.  
  609. // Sorts two images
  610. function webdeveloper_sortImages(imageOne, imageTwo)
  611. {
  612.     const imageOneSrc = imageOne.src;
  613.     const imageTwoSrc = imageTwo.src;
  614.  
  615.     var sortValue = 1;
  616.  
  617.     // If the images are equal
  618.     if(imageOneSrc == imageTwoSrc)
  619.     {
  620.         sortValue = 0;
  621.     }
  622.     else if(imageOneSrc < imageTwoSrc)
  623.     {
  624.         sortValue = -1;
  625.     }
  626.  
  627.     return sortValue;
  628. }
  629.  
  630. // Tidies a list of images by removing duplicates and sorting
  631. function webdeveloper_tidyImages(imageList)
  632. {
  633.     var image              = null;
  634.     var imageSrc           = null;
  635.     var newImageList       = new Array();
  636.     var newImageListLength = null;
  637.     var tidiedImageList    = new Array();
  638.  
  639.     // Loop through the images
  640.     for(var i = 0; i < imageList.length; i++)
  641.     {
  642.         image    = imageList[i];
  643.         imageSrc = image.src;
  644.  
  645.         // If the image src is set and does not end in '.xul' 
  646.         if(imageSrc && !imageSrc.endsWith(".xul"))
  647.         {
  648.             newImageList.push(image);
  649.         }
  650.     }
  651.  
  652.     newImageList.sort(webdeveloper_sortImages);
  653.     newImageListLength = newImageList.length;
  654.  
  655.     // Loop through the images
  656.     for(i = 0; i < newImageListLength; i++)
  657.     {
  658.         image = newImageList[i];
  659.  
  660.         // If this is not the last image and the image is the same as the next image
  661.         if(i + 1 < newImageListLength && image.src == newImageList[i + 1].src)
  662.         {
  663.             continue;
  664.         }
  665.  
  666.         tidiedImageList.push(image);
  667.     }
  668.  
  669.     return tidiedImageList;
  670. }
  671.  
  672. // Displays all the images for the page
  673. function webdeveloper_viewImageInformation()
  674. {
  675.     const fileProtocolHandler = Components.classes["@mozilla.org/network/protocol;1?name=file"].createInstance(Components.interfaces.nsIFileProtocolHandler);
  676.     const httpCacheSession    = Components.classes["@mozilla.org/network/cache-service;1"].getService(Components.interfaces.nsICacheService).createSession("HTTP", 0, true);
  677.     const mainTabBox          = getBrowser().mTabBox;
  678.     const documentList        = webdeveloper_getDocuments(getBrowser().browsers[mainTabBox.selectedIndex].contentWindow, new Array());
  679.     const oldTab              = getBrowser().selectedTab;
  680.     const oldURL              = getBrowser().currentURI.spec;
  681.     const preferencesService  = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  682.     const request             = new XMLHttpRequest();
  683.     const stringBundle        = document.getElementById("webdeveloper-string-bundle");
  684.     const title               = stringBundle.getFormattedString("webdeveloper_viewImageInformationTitle", [oldURL]);
  685.  
  686.     var backgroundImage   = null;
  687.     var cellDataElement   = null;
  688.     var cellHeaderElement = null;
  689.     var documentImageList = null;
  690.     var documentURL       = null;
  691.     var element           = null;
  692.     var file              = null;
  693.     var fileSize          = null;
  694.     var generatedPage     = null;
  695.     var headerElement     = null;
  696.     var image             = null;
  697.     var imageElement      = null;
  698.     var imageList         = new Array();
  699.     var imageSrc          = null;
  700.     var linkElement       = null;
  701.     var pageDocument      = null;
  702.     var pElement          = null;
  703.     var tableElement      = null;
  704.     var tableRowElement   = null;
  705.     var treeWalker        = null;
  706.  
  707.     generatedPage = webdeveloper_generatePage("");
  708.  
  709.     // This must be done to make generated content render
  710.     request.open("get", "about:blank", false);
  711.     request.send("");
  712.  
  713.     generatedPage.content.document.title = title;
  714.  
  715.     linkElement = generatedPage.content.document.createElement("link");
  716.     linkElement.setAttribute("href", "chrome://webdeveloper/content/stylesheets/generated_content.css");
  717.     linkElement.setAttribute("media", "all");
  718.     linkElement.setAttribute("rel", "stylesheet");
  719.     linkElement.setAttribute("type", "text/css");
  720.     generatedPage.content.document.getElementsByTagName("head")[0].appendChild(linkElement);
  721.  
  722.     headerElement = generatedPage.content.document.createElement("h1");
  723.     headerElement.appendChild(generatedPage.content.document.createTextNode(title));
  724.     generatedPage.content.document.body.appendChild(headerElement);
  725.  
  726.     // Loop through the documents
  727.     for(var i = 0; i < documentList.length; i++)
  728.     {
  729.         pageDocument      = documentList[i];
  730.         documentImageList = pageDocument.getElementsByTagName("img");
  731.         documentURL       = pageDocument.documentURI;
  732.         imageList         = new Array();
  733.         treeWalker        = pageDocument.createTreeWalker(pageDocument.body, NodeFilter.SHOW_ELEMENT, null, false);
  734.  
  735.         headerElement = generatedPage.content.document.createElement("h2");
  736.         linkElement   = generatedPage.content.document.createElement("a");
  737.         linkElement.setAttribute("href", documentURL);
  738.         linkElement.appendChild(generatedPage.content.document.createTextNode(documentURL));
  739.         headerElement.appendChild(linkElement);
  740.         generatedPage.content.document.body.appendChild(headerElement);
  741.  
  742.         // Loop through the document images
  743.         for(var j = 0; j < documentImageList.length; j++)
  744.         {
  745.             imageList.push(documentImageList[j]);
  746.         }
  747.  
  748.         // While the tree walker has more nodes
  749.         while((element = treeWalker.nextNode()) != null)
  750.         {
  751.             backgroundImage = element.ownerDocument.defaultView.getComputedStyle(element, "").getPropertyCSSValue("background-image");
  752.  
  753.             // If this element has a background image and it is a URL
  754.             if(backgroundImage && backgroundImage.primitiveType == CSSPrimitiveValue.CSS_URI)
  755.             {
  756.                 image     = new Image();
  757.                 image.src = backgroundImage.getStringValue();
  758.  
  759.                 imageList.push(image);
  760.             }
  761.         }
  762.  
  763.         imageList = webdeveloper_tidyImages(imageList);
  764.  
  765.         // Loop through the images
  766.         for(j = 0; j < imageList.length; j++)
  767.         {
  768.             fileSize     = null;
  769.             image        = imageList[j];
  770.             imageElement = generatedPage.content.document.createElement("img");
  771.             imageSrc     = image.src;
  772.             pElement     = generatedPage.content.document.createElement("p");
  773.             tableElement = generatedPage.content.document.createElement("table");
  774.  
  775.             imageElement.setAttribute("src", imageSrc);
  776.             pElement.appendChild(imageElement);
  777.             generatedPage.content.document.body.appendChild(pElement);
  778.  
  779.             // Src
  780.             cellDataElement   = generatedPage.content.document.createElement("td");
  781.             cellHeaderElement = generatedPage.content.document.createElement("th");
  782.             linkElement       = generatedPage.content.document.createElement("a");
  783.             tableRowElement   = generatedPage.content.document.createElement("tr");
  784.  
  785.             cellHeaderElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_src")));
  786.             tableRowElement.appendChild(cellHeaderElement);
  787.             linkElement.setAttribute("href", imageSrc);
  788.             linkElement.appendChild(generatedPage.content.document.createTextNode(imageSrc));
  789.             cellDataElement.appendChild(linkElement);
  790.             tableRowElement.appendChild(cellDataElement);
  791.             tableElement.appendChild(tableRowElement);
  792.  
  793.             // Width
  794.             cellDataElement   = generatedPage.content.document.createElement("td");
  795.             cellHeaderElement = generatedPage.content.document.createElement("th");
  796.             tableRowElement   = generatedPage.content.document.createElement("tr");
  797.  
  798.             cellHeaderElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_width")));
  799.             tableRowElement.appendChild(cellHeaderElement);
  800.             cellDataElement.appendChild(generatedPage.content.document.createTextNode(image.naturalWidth));
  801.             tableRowElement.appendChild(cellDataElement);
  802.             tableElement.appendChild(tableRowElement);
  803.  
  804.             // Height
  805.             cellDataElement   = generatedPage.content.document.createElement("td");
  806.             cellHeaderElement = generatedPage.content.document.createElement("th");
  807.             tableRowElement   = generatedPage.content.document.createElement("tr");
  808.  
  809.             cellHeaderElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_height")));
  810.             tableRowElement.appendChild(cellHeaderElement);
  811.             cellDataElement.appendChild(generatedPage.content.document.createTextNode(image.naturalHeight));
  812.             tableRowElement.appendChild(cellDataElement);
  813.             tableElement.appendChild(tableRowElement);
  814.  
  815.             // Try to get the file size
  816.             try
  817.             {
  818.                 file = httpCacheSession.openCacheEntry(imageSrc, Components.interfaces.nsICache.ACCESS_READ, false);
  819.  
  820.                 // If there is a file
  821.                 if(file)
  822.                 {
  823.                     fileSize = file.dataSize;
  824.                 }
  825.             }
  826.             catch(exception)
  827.             {
  828.                 try
  829.                 {
  830.                     file = fileProtocolHandler.getFileFromURLSpec(imageSrc);
  831.  
  832.                     // If the file is set and it exists and is a file
  833.                     if(file && file.exists() && file.isFile())
  834.                     {
  835.                         fileSize = file.fileSize;
  836.                     }
  837.                 }
  838.                 catch(exceptionNested)
  839.                 {
  840.                     // Do nothing
  841.                 }
  842.             }
  843.  
  844.             // If there is a file size
  845.             if(fileSize)
  846.             {
  847.                 cellDataElement   = generatedPage.content.document.createElement("td");
  848.                 cellHeaderElement = generatedPage.content.document.createElement("th");
  849.                 tableRowElement   = generatedPage.content.document.createElement("tr");
  850.  
  851.                 cellHeaderElement.appendChild(generatedPage.content.document.createTextNode(stringBundle.getString("webdeveloper_fileSize")));
  852.                 tableRowElement.appendChild(cellHeaderElement);
  853.                 cellDataElement.appendChild(generatedPage.content.document.createTextNode(webdeveloper_formatFileSize(fileSize)));
  854.                 tableRowElement.appendChild(cellDataElement);
  855.                 tableElement.appendChild(tableRowElement);
  856.             }
  857.  
  858.             generatedPage.content.document.body.appendChild(tableElement);
  859.             generatedPage.content.document.body.appendChild(generatedPage.content.document.createElement("hr"));
  860.         }
  861.     }
  862.  
  863.     // If the open tabs in background preference is set to true
  864.     if(preferencesService.prefHasUserValue("webdeveloper.open.tabs.background") && preferencesService.getBoolPref("webdeveloper.open.tabs.background"))
  865.     {
  866.         getBrowser().selectedTab = oldTab;
  867.     }
  868. }
  869.